<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript"  src="scripts/spritedefs.js" ></script>
        <script type="text/javascript"  src="scripts/utility/ListItems.js" ></script>
        <script type="text/javascript"  src="scripts/utility/jx.js" ></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <img src="images/crossroad.gif"/>
        <canvas id="canv1" width="500" height="400">
            This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>
        <script type="text/javascript">
          // engine instantiation ( Canvas id )
            var engine = new IsoEngine("canv1");
            objs = [1000];
            heavyImage = new Image(); 
            heavyImage.src = "images/spritesheet.png";
            //heavyImage.src = "images/Isometric/grasse.png";
            tileImg = new Image(); 
            tileImg.onerror = function(msg, url, linenumber){
            alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber)
            return true
           }
            tileImg.src = "images/Lighthouse.gif";
          // create a frame (Frame id ,width, height coordinates of the sprite, duration in seconds)
            tileFrame = new  Frame("t1",100,64,0,0,1); 
          // animation ( animID,Image)
            tileAnim = new Animation("static",tileImg);
          // add a frame to animation
            tileAnim.addFrame(tileFrame);
          // this is a not animated obj
            tileAnim.Enabled = false;
            var objN = 0;
            for( i = 0; i<20 ;i++)
                {
                    for ( n = 0; n<20; n++)
                        {
                          // create base map (tiles)
                          
                          // create TileObj(objid,tileNumberX,tileNumberY,Z)
                            objs[objN] = new TileObj("tile"+objN,i,n,0);
                          // add animation to obj
                            objs[objN].AddAnimation(tileAnim);
                          // set current animation
                            objs[objN].setCurrAnim("static");
                          // add Obj to Engine
                            engine.AddTileObj(objs[objN]);
                            objN ++;
                        }
                    
                }
            
          // create a list of frame 
          
          // create a frame (Frame id ,width, height coordinates of the sprite, duration in seconds)
            f1 = new  Frame("w1",50,50,0,0,0.2);
            f2 = new  Frame("w2",50,50.5,1,0,0.2);
            f3 = new  Frame("w3",50,50,2,0,0.2);
            f4 = new  Frame("w4",50,50,3,0,0.2);
            f5 = new  Frame("w5",50,50,4,0,0.2);
            f6 = new  Frame("w6",50,50,5,0,0.2);
            f7 = new  Frame("w7",50,50,6,0,0.2);
            f8 = new  Frame("w8",50,50,7,0,0.2);
           
          // create an animation with list of frames
            anim1 = new Animation("walk",heavyImage);
            anim1.addFrame(f1);
            anim1.addFrame(f2);
            anim1.addFrame(f3);
            anim1.addFrame(f4);
            anim1.addFrame(f5);
            anim1.addFrame(f6);
            anim1.addFrame(f7);
            anim1.addFrame(f8);
           
            obj1 = new IsoObj("woman");
            obj1.Height = 200;
            obj1.AddAnimation(anim1);
            obj1.setCurrAnim("walk");
          // position in 3D space
            obj1.SetPosition(420,40,0);
           
            engine.AddObj(obj1); 
            
            function updateEngine()
            {
                engine.update();
            } 
          // initialize engine and run 
            engine.Initialize();
            window.setInterval( updateEngine, 1000 / 60 );
        </script>

    </body>
</html>
